<template style="background: #f5f6fa">
  <div class="typical-home" ref="portaletDiv">
    <a-row :gutter="[16, 16]">
      <!-- 顶部列表 -->
      <a-col :span="16" class="module-list">
        <a-row :gutter="[16, 16]">
          <!-- 待办事项 -->
          <a-col :span="regionShow ? 12 : 24">
            <div class="module-in module-in01">
              <a-page-header :ghost="false" title="待办事项">
                <template slot="extra">
                  <a-icon type="more" />
                </template>
              </a-page-header>
              <a-list :grid="{ gutter: 8, column: data.length }" :data-source="data" class="list-totality">
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-card>
                    <p>{{ item.title }}</p>
                    <span>{{ item.data }}</span>
                  </a-card>
                </a-list-item>
              </a-list>
              <a-list item-layout="horizontal" :data-source="postList" class="list-detail">
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-list-item-meta>
                    <template slot="description">
                      <span>【{{ postStatusFormat(item) }}】</span>
                      <span>{{ item.title }}</span>
                      <a-tooltip placement="top">
                        <template slot="title">
                          <span>{{ item.title }}</span>
                        </template>
                        <a-icon type="question-circle" />
                      </a-tooltip>
                      <a>办理</a>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </div>
          </a-col>
          <!-- 待审核地区总览 -->
          <a-col :span="12" v-hasPermi="['platform:region:add']">
            <div class="module-in module-in02">
              <a-page-header :ghost="false" title="待审核地区总览">
                <template slot="extra">
                  <a-icon type="more" />
                </template>
              </a-page-header>
              <a-table
                rowKey="id"
                :columns="projectcolumns"
                :data-source="regionList"
                size="small"
                :pagination="{
                  current: regionQueryParam.pageNum,
                  pageSize: regionQueryParam.pageSize,
                  total: data[0].data,
                  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
                  onChange: changeSize,
                  onShowSizeChange: onShowSizeChange
                }"
              >
                <span slot="type" slot-scope="text, record">
                  {{ typeFormat(record) }}
                </span>
                <span slot="status" slot-scope="text, record">
                  <a-badge :status="statusBage(record.status)" :text="statusFormat(record)" />
                </span>
              </a-table>
            </div>
          </a-col>
          <!-- 趋势图 -->
          <a-col :span="24">
            <div class="module-in module-in04">
              <div style="height: 410px; padding-top: 8px">
                <!-- chart盒子 -->
                <list-radar ref="listRadar" :listdata="listdata" :nameList="nameList"></list-radar>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="8" class="module-list">
        <a-row :gutter="[0, 16]">
          <!-- 评论排行 -->
          <a-col>
            <div class="module-in module-in08">
              <a-page-header :ghost="false" title="评论排行">
                <template slot="extra">
                  <a-icon type="more" />
                </template>
              </a-page-header>
              <a-list item-layout="horizontal" :data-source="commentList">
                <a-list-item slot="renderItem" slot-scope="item, index">
                  <a-list-item-meta>
                    <div slot="description">
                      <div class="order">{{ heatdata[index].index }}</div>
                      <a-icon class="icon" :type="item.icon" />
                      <div class="txt">{{ item.content }}</div>
                      <a-statistic :value="heatdata[index].value" :precision="1">
                        <template #suffix>
                          <a-icon :type="heatdata[index].arrow === undefined ? ' ' : heatdata[index].arrow" :style="{ color: heatdata[index].color }" />
                        </template>
                      </a-statistic>
                    </div>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </div>
          </a-col>
          <!-- 统计信息 -->
          <a-col>
            <div class="module-in module-in09">
              <a-page-header :ghost="false" title="统计信息">
                <template slot="extra">
                  <a-date-picker :format="dateFormat" />
                  <a-icon type="more" />
                </template>
              </a-page-header>
              <div style="height: 260px; text-align: center">
                <!-- chart -->
                <pie-radar :data="piedata"></pie-radar>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<style lang="less">
body {
  .modlule-show {
    height: 240px;
    .ant-btn-lg {
      height: 40px;
      padding: 0 15px;
      font-size: 16px;
      border-radius: 4px;
    }
  }
}
</style>
<script>
import listRadar from '@/views/platform/statistics/histogramChart'
import pieRadar from '@/views/platform/statistics/pieChart'

import { listRegion, getInitData } from '@/api/platform/region'
import { listPost } from '@/api/platform/post'
import { listComment } from '@/api/platform/comment'

export default {
  components: {
    listRadar,
    pieRadar
  },
  data() {
    return {
      visible: false,
      // 待办事项
      data: [
        {
          title: '地区待审批',
          data: 0
        },
        {
          title: '帖子待审批',
          data: 0
        },
        {
          title: '总数',
          data: 0
        }
      ],
      // 查询参数
      regionQueryParam: {
        pageNum: 1,
        pageSize: 5,
        status: '1'
      },
      postQueryParam: {
        pageNum: 1,
        pageSize: 5,
        status: '0,3'
      },
      commentQueryParam: {
        pageNum: 1,
        pageSize: 5,
        status: '1,4'
      },
      regionList: [],
      postList: [],
      commentList: [],
      typeOptions: [],
      statusOptions: [],
      postStatusOptions: [],
      projectcolumns: [
        {
          title: '地区名称',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true
        },
        {
          title: '地区状态',
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status'
          },
          key: 'status',
          ellipsis: true,
          width: 96
        },
        {
          title: '类型',
          dataIndex: 'type',
          scopedSlots: {
            customRender: 'type'
          },
          key: 'type',
          ellipsis: true,
          width: 86
        }
      ],
      heatdata: [
        {
          index: '1',
          icon: 'copy',
          value: '10.2',
          arrow: 'arrow-down',
          color: '#5fb38f'
        },
        {
          index: '2',
          icon: 'snippets',
          value: '11.2',
          arrow: 'arrow-up',
          color: '#ed2e2e'
        },
        {
          index: '3',
          icon: 'edit',
          txt: '流程设计器',
          value: '17.2'
        },
        {
          index: '4',
          icon: 'fund',
          value: '15.2'
        },
        {
          index: '5',
          icon: 'highlight',
          value: '11.2',
          arrow: 'arrow-down',
          color: '#5fb38f'
        }
      ],
      dateFormat: 'YYYY-MM-DD',
      statisticscolumns: [
        {
          title: '名称',
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status'
          },
          key: 'status',
          ellipsis: true
        },
        {
          title: '数量',
          dataIndex: 'quantity',
          key: 'quantity',
          ellipsis: true
        },
        {
          title: '增长率',
          dataIndex: 'tags',
          key: 'tags',
          scopedSlots: {
            customRender: 'tags'
          },
          ellipsis: true
        }
      ],
      piedata: [
        {
          value: 0,
          name: '待审核地区'
        },
        {
          value: 0,
          name: '待审核帖子'
        },
        {
          value: 0,
          name: '排行评论'
        }
      ],
      nameList: ['待审核地区', '待审核帖子', '评论'],
      listdata: [0, 0, 0],
      compile: false,
      regionShow: true
    }
  },
  created() {
    this.init()
  },
  watch: {},
  mounted() {
    this.$emit('setHeight', this.$refs.portaletDiv.offsetHeight)
  },
  methods: {
    init() {
      if (!this.roleControl()) {
        this.getRegionList()
      }
      this.getPostList()
      this.getCommentList()
      getInitData('region_type,region_status,approve_status').then(response => {
        this.typeOptions = response.data.region_type
        this.statusOptions = response.data.region_status
        this.postStatusOptions = response.data.approve_status
      })
    },

    roleControl() {
      if (!this.$store.state.user.roles.includes('admin')) {
        this.regionShow = false
        this.data.splice(0, 1)
        this.piedata.splice(0, 1)
        this.nameList.splice(0, 1)
        this.listdata.splice(0, 1)
        return true
      }
      return false
    },

    /** 查询地区表列表 */
    getRegionList() {
      listRegion(this.regionQueryParam).then(response => {
        this.regionList = response.data.rows
        this.data[0].data = response.data.total
        this.data[2].data = this.data[2].data + response.data.total
        this.piedata[0].value = this.regionList.length
        this.listdata[0] = response.data.total
        this.$refs.listRadar.setCommandOption()
      })
    },
    getPostList() {
      listPost(this.postQueryParam).then(response => {
        this.postList = response.data.rows
        this.data[this.data.length - 2].data = response.data.total
        this.data[this.data.length - 1].data = this.data[this.data.length - 1].data + response.data.total
        this.piedata[this.piedata.length - 2].value = this.postList.length
        this.listdata[this.listdata.length - 2] = response.data.total
        this.$refs.listRadar.setCommandOption()
      })
    },
    /** 查询评论管理列表 */
    getCommentList() {
      listComment(this.commentQueryParam).then(response => {
        this.commentList = response.data.rows
        this.piedata[this.piedata.length - 1].value = this.commentList.length
        this.listdata[this.listdata.length - 1] = response.data.total
        this.$refs.listRadar.setCommandOption()
      })
    },

    /** 翻页操作 */
    changeSize(current, pageSize) {
      this.regionQueryParam.pageNum = current
      this.regionQueryParam.pageSize = pageSize
      this.getRegionList()
    },

    /** 翻页操作 */
    onShowSizeChange(current, pageSize) {
      this.regionQueryParam.pageSize = pageSize
      this.getRegionList()
    },
    // 帖子状态字典翻译
    postStatusFormat(row) {
      if (row.status) {
        return this.selectDictLabel(this.postStatusOptions, row.status)
      } else {
        return ''
      }
    },

    // 地区类型字典翻译
    typeFormat(row) {
      if (row.type) {
        return this.selectDictLabel(this.typeOptions, row.type)
      } else {
        return ''
      }
    },
    // 地区状态字典翻译
    statusFormat(row) {
      if (row.status) {
        return this.selectDictLabel(this.statusOptions, row.status)
      } else {
        return ''
      }
    },
    // 地区状态徽标数类型
    statusBage(status) {
      if (status === '0') {
        return 'default'
      } else if (status === '1') {
        return 'warning'
      } else if (status === '2') {
        return 'processing'
      } else if (status === '3') {
        return 'error'
      }
    },

    getHeight() {
      return this.$refs.portaletDiv.offsetHeight
    }
  }
}
</script>
<style lang="less">
@import '../typical-home.less';
</style>
